<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>亚马逊数据分析平台 - 数据上传</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .upload-container {
            border: 2px dashed #007bff;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            background-color: white;
            transition: all 0.3s;
        }

        .upload-container.dragover {
            background-color: #e9f5ff;
            border-color: #0056b3;
        }

        #file-input {
            display: none;
        }

        .upload-btn {
            background-color: #007bff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
        }

        .upload-btn:hover {
            background-color: #0056b3;
        }

        #file-list {
            margin-top: 20px;
            list-style: none;
            padding: 0;
        }

        .status-message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <h1>亚马逊销售数据上传</h1>
    
    <!-- 上传区域 -->
    <div class="upload-container" id="drop-zone">
        <p>将Excel文件拖拽到此处 或</p>
        <button class="upload-btn" onclick="document.getElementById('file-input').click()">
            选择文件
        </button>
        <input type="file" id="file-input" accept=".xls,.xlsx" />
        <div id="status" class="status-message"></div>
    </div>

    <!-- 文件列表 -->
    <ul id="file-list"></ul>
    
    <!-- 数据列表区域 -->
    <div class="data-table-container">
        <h2>数据统计列表</h2>
        <table id="dataTable">
            <thead>
                <tr>
                    <th>日期</th>
                    <th>今日词量</th>
                    <th>与昨日增量</th>
                    <th>今日筛选词</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="tableBody">
                <!-- 数据将通过JavaScript动态插入 -->
            </tbody>
        </table>
    </div>

    <style>
        .data-table-container {
            margin-top: 30px;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        #dataTable {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        #dataTable th, #dataTable td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        #dataTable th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        #dataTable tr:hover {
            background-color: #f5f5f5;
        }

        .action-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
            background-color: #007bff;
            color: white;
        }

        .action-btn:hover {
            background-color: #0056b3;
        }

        .increase {
            color: #28a745;
        }

        .decrease {
            color: #dc3545;
        }
    </style>

    <script>
        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', fetchDataList);

        // 获取数据列表
        function fetchDataList() {
            fetch('http://10.81.108.25:8888/api/getDataList')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderDataTable(data.data);
                    } else {
                        console.error('获取数据失败:', data.message);
                    }
                })
                .catch(error => {
                    console.error('请求失败:', error);
                });
        }

        // 渲染数据表格
        function renderDataTable(data) {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';

            data.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${formatDate(item.date)}</td>
                    <td>${item.todayWordCount}</td>
                    <td class="${item.increment > 0 ? 'increase' : 'decrease'}">
                        ${item.increment > 0 ? '+' : ''}${item.increment}
                    </td>
                    <td>${item.filteredWords}</td>
                    <td>
                        <button class="action-btn" onclick="viewDetail(${item.id})">查看详情</button>
                        <button class="action-btn" onclick="exportData(${item.id})">导出</button>
                    </td>
                `;
                tableBody.appendChild(row);
            });
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }

        // 查看详情
        function viewDetail(id) {
            // TODO: 实现查看详情功能
            console.log('查看详情:', id);
        }

        // 导出数据
        function exportData(id) {
            // TODO: 实现导出功能
            console.log('导出数据:', id);
        }
    </script>
    <script>
        // 获取DOM元素
        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        const statusDiv = document.getElementById('status');
        const fileList = document.getElementById('file-list');

        // 拖拽事件处理
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('dragover');
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFiles(files);
            }
        });

        // 文件选择事件
        fileInput.addEventListener('change', (e) => {
            handleFiles(e.target.files);
        });

        // 文件处理函数
        function handleFiles(files) {
            const file = files[0];
            if (!file) return;

            // 验证文件类型
            if (!file.name.match(/\.(xls|xlsx)$/i)) {
                showStatus('仅支持Excel文件 (.xls, .xlsx)', 'error');
                return;
            }

            // 显示上传状态
            showStatus('上传中... <div class="loading"></div>', 'loading');
            
            // 创建FormData
            const formData = new FormData();
            formData.append('excelFile', file);

            // 发送到后端（示例API地址需要替换为你的实际接口）
            fetch('http://10.81.108.25:8888/api/uploadFile', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showStatus('上传成功！文件已开始处理', 'success');
                    addFileToList(file.name);
                } else {
                    showStatus(`上传失败: ${data.message}`, 'error');
                }
            })
            .catch(error => {
                showStatus(`网络错误: ${error.message}`, 'error');
            });
        }

        // 显示状态信息
        function showStatus(message, type) {
            statusDiv.innerHTML = message;
            statusDiv.className = `status-message ${type}`;
        }

        // 添加文件到列表
        function addFileToList(filename) {
            const li = document.createElement('li');
            li.innerHTML = `
                <span>?</span>
                ${filename}
                <span class="file-status">已上传</span>
            `;
            fileList.appendChild(li);
        }
    </script>
</body>
</html>